<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            width: 500px; 
            height:500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="container" ></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
    <script>
        //echats.js文件会对外暴露一个echats对象
        //1.创建并初始化一个echarts实例
        var con = document.querySelector('#container');
        var e = echarts.init(con);

        //2.绘制图表
        e.setOption({
            title:{ //图表的标题
                text:'H52217 班级成绩' ,
                left:'center',
            },
            legend:{ //图例
                top:25,
                // right:10,
            },
            xAxis:{ //x轴设置
                data:['第1天','第2天','第3天','第4天','第5天']
            },
            yAxis:{ //y轴设置
                splitLine:{
                    show:false
                }
            },
            series:[ //数据系列
                {
                    name:'当日成绩',
                    barWidth:30, //柱子的宽度
                    showBackground:false,//显示背景色
                    backgroundStyle:{
                        //color: '',
                        borderRadius:0, //背景圆角
                    },
                    itemStyle:{ 
                        //borderRadius:[20,0,20,0],//边框圆角 
                        borderRadius:[0],//边框圆角 
                    },
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    //     { offset: 0, color: '#83bff6' },
                    //     { offset: 0.5, color: '#188df0' },
                    //     { offset: 1, color: '#188df0' }
                    // ])
                    // ,
                    type:'bar',//'line' , 'bar' , 'pie'
                    data:[70,50,89,60,40] 
                },
                // {
                //     name:'平均成绩',
                //     type:'line',//'line' , 'bar' , 'pie'
                //     data:[60,70,59,60,30] ,
                //     symbolSize:15, //圆点大小
                //     symbol:'circle',//圆点形状
                //     smooth:true, //是否平滑曲线显示
                //     itemStyle:{
                //         normal:{
                //             color:'pink', //折线颜色
                //             borderWidth:2, //圆点的边框宽度
                //             borderColor:'white', //圆点的边框颜色
                //             lineStyle:{ width:2 }, //折现的宽度
                //             shadowBlur:5,
                //             shadowColor:'#188df0'

                //         }
                //     }

                // }

            ]
        });

    </script>
</body>
</html>